<template>
  <div class="header">
    <router-link class="back" to="mypage">先逛一逛</router-link>
    <div class="box">
      <div class="top">
        <img src="./assets/navImges/home_active.png" alt="" />
      </div>
      <div class="bottom">
        <div class="coffee-top">luckin coffee</div>
        <div class="coffee-bottom">瑞幸咖啡</div>
      </div>
    </div>
    <input
      type="text"
      class="username"
      placeholder="请输入账号"
      v-model="phone"
    />
    <input
      type="password"
      class="password"
      placeholder="请输入密码"
      v-model="password"
    />
    <div class="login" v-on:click="mylogin">登录</div>
    <van-cell class="register" @click="showPopup">注册</van-cell>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-form @submit="onSubmit">
        <van-field
          v-model="username1"
          type="username"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password1"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="nickName1"
          type="nickName"
          name="昵称"
          label="昵称"
          placeholder="昵称 "
          :rules="[{ required: true, message: '请填写昵称' }]"
        />
        <div style="margin: 16px">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="myRegister"
            >提交</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>


<style lang="scss" scoped>
.header {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
  .back {
    display: flex;
    justify-content: right;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    margin-right: 10px;
    color: #0c34ba;
    margin-top: 10px;
    font-weight: bold;
  }
  .box {
    margin: 0 auto;
    .top {
      margin: 0 auto;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .bottom {
      .coffee-top,
      .coffee-bottom {
        font-weight: bold;
      }
    }
  }
  .username,
  .password {
    margin: 0 auto;
    width: 90%;
    height: 50px;
    border-radius: 30px;
    border: 1px solid white;
    margin-top: 50px;
    color: black;
    font-size: 16px;
    outline: none;
    margin-left: 10px;
  }
  .login {
    width: 90%;
    margin: 0 auto;
    height: 50px;
    margin-top: 50px;
    border-radius: 20px;
    border: 1px solid transparent;
    color: white;
    background-color: blue;
    line-height: 40px;
  }
  .register {
    padding-left: 150px;
    width: 90%;
    margin: 0 auto;
    height: 50px;
    margin-top: 40px;
    border-radius: 20px;
    border: 1px solid transparent;
    color: black;
    background-color: white;
    border: 1px solid #f2f3f5;
    line-height: 40px;
  }
}
</style>
<script>
import "./assets/fonts/iconfont.css";
import { ref } from "vue";
export default {
  name: "mylogin",

  data() {
    return {
      username: "",
      password: "",
      username1: "",
      phone: "",
      password1: "",
      show: false,
      token_list: [],
      nickName1: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    showPopup() {
      this.show = true;
    },
    myRegister() {
      let _this = this;
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        password: this.password1,
        phone: this.username1,
        nickName: this.nickName1,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/register", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          // console.log(res);
          _this.$toast("注册成功");

        })
        .catch((err) => {
          console.log(err);
        });
    },
    mylogin() {
      // var storage = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        password: this.password,
        phone: this.phone,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/login", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          if (res.data.code == 200) {
            console.log("12313", res);
            this.token_list = res.data.token;
            // console.log(this.token_list);
            let tokenString = localStorage.setItem("token_list",this.token_list);
            console.log("这是本地token",tokenString);
            this.$router.push("/mypage");
            this.$toast("登录成功");
            
          } else if (res.data.code == 202) {
            this.$toast("登录失败");
          } else if (res.data.code == 201) {
            this.$toast("未注册");
          }
          console.log(res, this.phone, this.password);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

